<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <title>template-1.0-traditional</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

        <link href="vendor/turnjs/basic.css" rel="stylesheet" />
        <script src="vendor/jquery-1.9.1.min.js" type="text/javascript" charset="utf-8"> </script>
        <script src="vendor/turnjs/lib/turn.min.js" type="text/javascript" charset="utf-8"> </script>
        <script src="vendor/turnjs/lib/turn.html4.min.js" type="text/javascript" charset="utf-8"> </script>
        
        <style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			/*
			#flipbook {
							width: 800px;
							height: 600px;
							background: #0099FF;
						}
			
						#flipbook .page {
							width: 400px;
							height: 600px;
						}*/
			
			body {
				background: #EFEFEF;
			}
        </style>
        <script type="text/javascript">
            $(function() {
                $("#flipbook").turn({
                    width : 600,
                    height : 400,
                    autoCenter : true
                });
            });
        </script>
    </head>
    <body>

    <h1>this is header!</h1>
        <div id="flipbook">
    <div class="hard"> Turn.js </div>
    <div class="hard"> </div>
    <div> Page 1 </div>
    <div> Page 2 </div>
    <div> Page 3 </div>
    <div> Page 4 </div>
    <div class="hard"> </div>
    <div class="hard"> </div>
</div>
    </body>
</html>
